<template>
    <div ref="echartRef" class="echarts"></div>
</template>
<script lang="ts">
export default {
    name: 'ECharts',
}
</script>
<script setup lang="ts">
import * as Echarts from 'echarts'
// import * as Echarts from 'echarts/core'
import { Raw, markRaw, onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
    defaultOptions: {
        type: Object,
        required: true,
    },
    options: {
        type: Object,
        required: true,
    },
})

const echartRef = ref<HTMLDivElement | null>(null)
const chat = ref<Raw<Echarts.ECharts>>()

onMounted(() => {
    chat.value = markRaw(Echarts.init(echartRef.value as HTMLDivElement))
    chat.value?.setOption(props.defaultOptions)
    window.addEventListener('resize', onResize, { passive: true })
})
watch(
    () => props.options,
    (value) => {
        chat.value?.setOption(value, {
            replaceMerge: Object.keys(props.options)
        })
    }
)
onUnmounted(() => {
    window.removeEventListener('resize', onResize)
})
const onResize = () => {
    chat.value?.resize()
}
</script>
<style lang="scss" scoped>
.echarts {
    width: 100%;
    height: 100%;
}
</style>
